<template>
  <div class="main">
    <form-search :list="searchList" :info="form" column="4" @confirm="searchConfirm"></form-search>

    <div class="table">
      <el-table :data="tableData" height="600" style="width: 100%;" @selection-change="handleSelectionChange" @row-click="toDetail">
        <el-table-column type="selection" width="48" />
        <el-table-column width="50">
          <template #header>
            <p class="header-row flex-center flex-align-items-center pointer">
              <i class="iconfont icon-ERP_gengxin"></i>
            </p>
          </template>
          <template #default="scope">
            <div class="row-asterisk flex-center flex-align-items-center">
              <i class="iconfont pointer"
                :class="scope.row.asterisk ? 'icon-guanzhu-yiguanzhu' : 'icon-guanzhu-weiguanzhu'"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="62">
          <template #header>
            <p class="header-row flex-center flex-align-items-center pointer" @click="delTable">
              <i class="iconfont icon-shanchu"></i>
            </p>
          </template>
          <template #default="scope">
            <span class="font-14">{{ scope.row.read ? '已读' : '未读' }}</span>
          </template>
        </el-table-column>
        <el-table-column width="200">
          <template #default="scope">
            <div class="row-name flex flex-align-items-center">
              <p class="font-14-B ellipsis-1">{{ scope.row.name }}</p>
              <span class="font-12">{{ scope.row.count }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="140">
          <template #default="scope">
            <span class="font-14">{{ scope.row.plan ? scope.row.plan : '无推广计划' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="text" />
        <el-table-column prop="time" width="180" />
      </el-table>
      <div class="pagination flex">
        <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total" :total="form.total" />
      </div>
    </div>
  </div>
</template>

<script setup>
import FormSearch from '../../components/formSearch.vue';
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

const searchList = [
  {
    label: '红人名称',
    type: 'input',
    key: 'name'
  },
  {
    label: '标题正文',
    type: 'input',
    key: 'text'
  },
  {
    label: '任务名称',
    type: 'input',
    key: 'taskName'
  },
  {
    label: '标签名称',
    type: 'select',
    key: 'tag',
    options: [
      {
        label: '感兴趣',
        value: 1
      },
      {
        label: '不感兴趣',
        value: 2
      },
      {
        label: '价格不合适',
        value: 3
      },
      {
        label: '已寄品',
        value: 4
      },
      {
        label: '视频制作中',
        value: 5
      },
      {
        label: '视频上线',
        value: 6
      }
    ]
  },
  {
    label: '星标邮件',
    type: 'select',
    key: 'asterisk',
    options: [
      {
        label: '星标邮件',
        value: 1
      },
      {
        label: '所有邮件',
        value: 2
      }
    ]
  },
  {
    label: '已读状态',
    type: 'select',
    key: 'read',
    options: [
      {
        label: '未读',
        value: 1
      },
      {
        label: '已读',
        value: 2
      }
    ]
  },
  {
    label: '是否回复邮件',
    type: 'select',
    key: 'reply',
    options: [
      {
        label: '已回复',
        value: 1
      },
      {
        label: '未回复',
        value: 2
      }
    ]
  }
];

const form = ref({
  total: 100
});
const tableData = ref([
  {
    id: 1,
    asterisk: false,
    name: 'Gurudath Kamath',
    count: 1,
    plan: null,
    text: 'xxxxxxx',
    time: '2023-12-28 16:00:00'
  },
  {
    id: 1,
    asterisk: true,
    name: 'Gurudath Kamath',
    count: 1,
    plan: null,
    text: 'xxxxxxx',
    time: '2023-12-28 16:00:00'
  }
]);

const searchConfirm = e => {
  form.value = {
    ...e
  };
}
const handleSelectionChange = e => {
  console.log(e);
}
const delTable = () => {
  ElMessageBox.confirm(
    `此操作将永久删除，是否继续`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
    })
    .catch(() => {
    })
}
const toDetail = e => {
  router.push(`/inboxDetail?id=${e.id}`);
}
</script>

<style lang="less" scoped>
.main {
  padding: 16px;
}

.table {
  background: #fff;

  &::v-deep {
    .el-table__cell {
      height: 54px;
    }
  }

  .header-row {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    position: relative;
    right: 6px;

    &:hover {
      background: #eef0f0;
    }

    i {
      color: #767676;
    }
  }

  .row-name {
    p {
      color: #333;
      max-width: 150px;
    }

    span {
      height: 18px;
      border-radius: 4px;
      font-size: 12px;
      line-height: 18px;
      padding: 0 5px;
      color: @main-color;
      background: rgba(255, 82, 119, .2);
      margin-left: 8px;
    }
  }

  .row-asterisk {
    .icon-guanzhu-yiguanzhu {
      color: @main-color;
    }
  }

  .pagination {
    justify-content: end;
    padding: 16px;
    box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, .05);
  }
}
</style>
